<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		  <el-table :data="userList" border :max-height="height"
		  	style="width: 100%">
		  	<el-table-column fixed label="No." type="index" align="center" width="50">
		  	</el-table-column>
		  	<el-table-column type="expand">
		  	      <template slot-scope="props">
		  	        <el-form label-position="left" inline class="demo-table-expand">
		  	          <el-form-item label="商品名称">
		  	            <span>{{ props.row.user }}</span>
		  	          </el-form-item>
		  	          <el-form-item label="所属店铺">
		  	            <span>{{ props.row.user }}</span>
		  	          </el-form-item>
		  	          <el-form-item label="商品 ID">
		  	            <span>{{ props.row.user }}</span>
		  	          </el-form-item>
		  	          <el-form-item label="店铺 ID">
		  	            <span>{{ props.row.user }}</span>
		  	          </el-form-item>
		  	          <el-form-item label="商品分类">
		  	            <span>{{ props.row.user }}</span>
		  	          </el-form-item>
		  	          <el-form-item label="店铺地址">
		  	            <span>{{ props.row.user }}</span>
		  	          </el-form-item>
		  	          <el-form-item label="商品描述">
		  	            <span>{{ props.row.desc }}</span>
		  	          </el-form-item>
		  	        </el-form>
		  	      </template>
		  	    </el-table-column>
		  	<el-table-column fixed prop="user" label="User" width="120">
		  	</el-table-column>
		  	<el-table-column prop="email" label="Email" width="120">
		  	</el-table-column>
		  
		  	<el-table-column prop="dept" label="Department" width="120">
		  	</el-table-column>
		  	<!-- person Status -->
		  	<!-- On job ; Leval:Date Year and month  -->
		  	<el-table-column prop="ps" label="Person Status" width="80" align="center">
		  	</el-table-column>
		  	<el-table-column prop="n1" label="N+1/Deptment Mgr" width="120">
		  	</el-table-column>
		  	<el-table-column prop="n1Email" label="N+1/Deptment Mgr Email" width="150">
		  	</el-table-column>
		  	<el-table-column prop="key" label="Key N-1" width="50" align="center">
		  	</el-table-column>
		  	<el-table-column fixed="right" label="操作" min-width="100">
		  		<template slot-scope="scope">
		  			<el-button @click="openView1(scope)" type="text" size="small">View</el-button>
		  			<el-button type="text" size="small">编辑</el-button>
		  		</template>
		  	</el-table-column>
		  </el-table>
		</div>
	</body>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script>
	var Main = new Vue({
	  el:"#app",
	  data() {
	      return {
	        userList: [{
	          id: '12987122',
	          name: '好滋好味鸡蛋仔',
	          category: '江浙小吃、小吃零食',
	          desc: '荷兰优质淡奶，奶香浓而不腻',
	          address: '上海市普陀区真北路',
	          shop: '王小虎夫妻店',
	          shopId: '10333'
	        }, {
	          id: '12987123',
	          name: '好滋好味鸡蛋仔',
	          category: '江浙小吃、小吃零食',
	          desc: '荷兰优质淡奶，奶香浓而不腻',
	          address: '上海市普陀区真北路',
	          shop: '王小虎夫妻店',
	          shopId: '10333'
	        }, {
	          id: '12987125',
	          name: '好滋好味鸡蛋仔',
	          category: '江浙小吃、小吃零食',
	          desc: '荷兰优质淡奶，奶香浓而不腻',
	          address: '上海市普陀区真北路',
	          shop: '王小虎夫妻店',
	          shopId: '10333'
	        }, {
	          id: '12987126',
	          name: '好滋好味鸡蛋仔',
	          category: '江浙小吃、小吃零食',
	          desc: '荷兰优质淡奶，奶香浓而不腻',
	          address: '上海市普陀区真北路',
	          shop: '王小虎夫妻店',
	          shopId: '10333'
	        }]
	      }
	    }
	})
	   
	</script>
</html>
